<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <!-- Left column -->
        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100 Responsive100 NoIndent">
                <div class="Container100">
                    <div class="Card ui-fluid">
                        <h1 class="CardBigTopic">Overlay Panel</h1>
                        <div class="SeparatorFull"/>
                        <h:form>
                            <div class="Container33 Responsive50">
                                <p:commandButton id="imageBtn" value="Basic" styleClass="AquaButton" style="margin-right: 10px;" type="button"/>
                                <p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
                                    <p:graphicImage name="/demo/images/transformers.jpg" width="250" />
                                </p:overlayPanel>
                            </div>

                            <div class="Container33 Responsive50">
                                <p:commandButton id="carBtn" value="Dynamic" styleClass="AquaButton" style="margin-right: 10px;" type="button"/>
                                <p:overlayPanel id="carPanel" for="carBtn" hideEffect="clip" dynamic="true" style="width:300px">
                                    <p:dataTable var="car" value="#{dtSelectionView.cars2}" reflow="true" rows="5" paginator="true">
                                        <p:column headerText="Id">
                                            <h:outputText value="#{car.id}" />
                                        </p:column>

                                        <p:column headerText="Year">
                                            <h:outputText value="#{car.year}" />
                                        </p:column>

                                        <p:column headerText="Brand">
                                            <h:outputText value="#{car.brand}" />
                                        </p:column>

                                        <!--<p:column headerText="Color">
                                            <h:outputText value="#{car.color}" />
                                        </p:column>-->
                                    </p:dataTable>
                                </p:overlayPanel>
                            </div>
                        </h:form>
                    </div>
                </div>
            </div>

            <div class="Container100 Responsive100 NoIndent">
                <div class="Container100">
                    <div class="Card ui-fluid">
                        <h1 class="CardBigTopic">Dialog</h1>
                        <div class="SeparatorFull"/>
                        <h:form>
                            <div class="Container33 Responsive50">
                                <p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" styleClass="NavyButton"/>
                            </div>
                            <div class="Container33 Responsive50">
                                <p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" styleClass="NavyButton"/>
                            </div>
                            <div class="Container33 Responsive50">
                                <p:commandButton value="Effects" type="button" onclick="PF('dlg3').show();" styleClass="NavyButton"/>
                            </div>

                            <p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40" responsive="true">
                                <h:outputText value="Resistance to PrimeFaces is futile!" />
                            </p:dialog>

                            <p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="50" responsive="true">
                                <h:outputText value="This is a Modal Dialog." />
                            </p:dialog>

                            <p:dialog header="Effects"
                                      widgetVar="dlg3"
                                      minimizable="true"
                                      maximizable="true"
                                      showEffect="explode"
                                      hideEffect="bounce"
                                      height="100"
                                      responsive="true">
                                <h:outputText value="This dialog has nice effects." />
                            </p:dialog>
                        </h:form>
                    </div>
                </div>
            </div>

            <div class="Container100 Responsive100 NoIndent">
                <div class="Container100">
                    <div class="Card ui-fluid">
                        <h1 class="CardBigTopic">Confirm Dialog</h1>
                        <div class="SeparatorFull"/>
                        <h:form>
                            <p:growl id="message" showDetail="true" />

                            <div class="Container33 Responsive50">
                                <p:commandButton value="Confirm" actionListener="#{dialogView.destroyWorld}" styleClass="OrangeButton" update="message">
                                    <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
                                </p:commandButton>
                            </div>

                            <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" closeOnEscape="true">
                                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes GreenButton" icon="ui-icon-check fa fa-check Fs14 White"/>
                                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no RedButton" icon="ui-icon-close fa fa-close Fs14 White"/>
                            </p:confirmDialog>
                        </h:form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right column -->
        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100 Responsive100 NoIndent">
                <div class="Container100 ui-fluid">
                    <div class="Card">
                        <h1 class="CardBigTopic">LightBox</h1>
                        <div class="SeparatorFull"/>
                        <h:form>
                            <p:lightBox id="lighbox1" styleClass="imagebox">
                                <h:outputLink value="resources/demo/images/megatron.jpg" title="Megatron">
                                    <p:graphicImage name="demo/images/megatron.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                </h:outputLink>

                                <h:outputLink value="resources/demo/images/optimus.jpg" title="Optimus Prime">
                                    <p:graphicImage name="demo/images/optimus.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                </h:outputLink>

                                <h:outputLink value="resources/demo/images/transformers.jpg" title="Transformers Age Of Extinction">
                                    <p:graphicImage name="demo/images/transformers.jpg" style="height: 77px; width: auto; margin-right: 10px;" />
                                </h:outputLink>

                                <h:outputLink value="resources/demo/images/bee.jpeg" title="Bumblebee">
                                    <p:graphicImage name="demo/images/bee.jpeg" style="height: 77px; width: auto;" />
                                </h:outputLink>
                            </p:lightBox>
                        </h:form>
                    </div>
                </div>
            </div>

            <div class="Container100 Responsive100 NoIndent">
                <div class="Container100 ui-fluid">
                    <div class="Card">
                        <h1 class="CardBigTopic">Inline</h1>
                        <div class="SeparatorFull"/>
                        <h:form>
                            <p:lightBox id="lighbox2">
                                <h:outputLink value="#">
                                    <h:outputText value="Video Content" style="color:#3E98D3;" />
                                </h:outputLink>

                                <f:facet name="inline">
                                    <p:media player="flash" value="http://vimeo.com/moogaloop.swf?clip_id=87780794" height="225" width="400" />
                                </f:facet>
                            </p:lightBox>
                        </h:form>
                    </div>
                </div>
            </div>

            <div class="Container100 Responsive100 NoIndent">
                <div class="Container100 ui-fluid">
                    <div class="Card">
                        <h1 class="CardBigTopic">Iframe</h1>
                        <div class="SeparatorFull"/>
                        <h:form>
                            <p:lightBox iframe="true" id="lighbox3">
                                <h:outputLink value="http://www.primefaces.org/" title="PrimeFaces HomePage">
                                    <h:outputText value="PrimeFaces HomePage" style="color:#3E98D3;" />
                                </h:outputLink>
                            </p:lightBox>
                        </h:form>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>